<template>
  <div class="popup">
    <van-search
      v-model="iptVal"
      show-action
      :placeholder="iptPlaceholder"
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onCancel">取消</div>
      </template>
    </van-search>

    <!-- 历史记录热门搜索组件 -->
    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />

    <!-- 搜索列表区块 -->
    <MyList v-else-if="blockShow == 2" :arr="listArr" @cellClick="tagClick" />

    <!-- 产品区块 -->
    <MyProduct
      v-else
      :filterCategory="filterCategory"
      :goodsList="goodsList"
      @categoryChange="categoryChange"
      @priceChange="priceChange"
    />

    <BackTop />
  </div>
</template>

<script>
import HistoryHot from "@/components/popup/HistoryHot.vue";
import MyProduct from "@/components/popup/MyProduct.vue";
import MyList from "@/components/popup/MyList.vue";
import BackTop from "@/components/BackTop.vue";
import { GetPopupData, GetSearchData, GetTimeData } from "@/api";
export default {
  name: "MyPopup",
  components: {
    HistoryHot,
    MyList,
    MyProduct,
    BackTop,
  },
  data() {
    return {
      iptVal: "",
      // 区块显示(1代表HistoryHot，2代表List，3代表Products)
      blockShow: 1,
      // 历史区块的数组
      historyKeywordList: [],
      // 热门搜索的数组
      hotKeywordList: [],
      // 传递给MyProduct组件的分类数据
      filterCategory: [],
      // 传递给MyProduct组件的商品列表数据
      goodsList: [],
      // 价格排序
      order: "desc",
      // 分类的id
      categoryId: 0,
      // 排序的方式,id就是默认的排序方式，price就是价格排序
      sort: "id",
      // List组件的数组
      listArr: [],
      iptPlaceholder: "",
    };
  },
  methods: {
    // 子传父过来调用的方法
    categoryChange(val) {
      this.categoryId = val;
      this.onSearch();
    },
    priceChange(val) {
      this.order = val;
      this.sort = "price";
      this.onSearch();
    },
    // 历史区块的标签点击,点击搜索列表时进行搜索的合并事件
    tagClick(val) {
      this.iptVal = val;
      this.onSearch();
    },
    // 取消
    onCancel() {
      this.$router.go(-1);
    },
    // 搜索
    onSearch() {
      GetSearchData({
        keyword: this.iptVal,
      }).then((res) => {
        if (res.errno == 0) {
          this.blockShow = 3;
          let { filterCategory, goodsList } = res.dskjata;
          // 因为vant下拉菜单中的名字必须为text和value，所以在这儿进行改名（深拷贝）
          let arr = JSON.parse(
            JSON.stringify(filterCategory)
              .replace(/name/g, "text")
              .replace(/id/g, "value")
          );
          this.filterCategory = arr;
          this.goodsList = goodsList;
        }
      });
    },
    // 实时搜索
    onInput() {
      // 实时搜索的同时显示列表区块,把blockShow设为2
      this.blockShow = 2;
      GetTimeData({
        keyword: this.iptVal,
      }).then((res) => {
        this.listArr = res.hotKeywordList;
      });
    },
  },
  created() {
    GetPopupData()
      .then((res) => {
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res;
        this.iptPlaceholder = defaultKeyword.keyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
.popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #efefef;
  z-index: 999;
}
</style>